<template>
  <div class="doctor-welcome-container">
    <!-- 假设侧边栏和头部已经存在 -->
    <div class="welcome-content">
      <div class="welcome-header">
        <h1>欢迎回来，<span class="doctor-name">{{user.name.substring(0,1)}}医生</span>！</h1>
        <p class="welcome-subtitle">今天是 {{ currentDate }}，祝您工作顺利！</p>
      </div>

      <div class="welcome-cards">
        <div class="welcome-card primary">
          <div class="card-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="card-content">
            <h3>医疗使命</h3>
            <p>以患者为中心，提供最优质的医疗服务</p>
          </div>
        </div>

        <div class="welcome-card success">
          <div class="card-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.709 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18457 2.99721 7.13633 4.39828 5.49707C5.79935 3.85782 7.69279 2.71538 9.79619 2.24015C11.8996 1.76491 14.1003 1.98234 16.07 2.86" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M22 4L12 14.01L9 11.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="card-content">
            <h3>专业精神</h3>
            <p>严谨、专注、持续学习与进步</p>
          </div>
        </div>

        <div class="welcome-card warning">
          <div class="card-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 8V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="card-content">
            <h3>医者仁心</h3>
            <p>关爱每一位患者，守护生命健康</p>
          </div>
        </div>
      </div>

      <div class="welcome-main">
        <div class="welcome-illustration">
          <img src="https://img.freepik.com/free-vector/doctor-character-background_1270-84.jpg?w=1380&t=st=1698765432~exp=1698766032~hmac=6a8c8a8c8a8c8a8c8a8c8a8c8a8c8a8c8a8c8a8c8a8c8a8c8a8c8a8c8a8c" alt="医生工作插图">
        </div>
        <div class="welcome-message">
          <h2>您的工作改变着生命</h2>
          <p>每一天，您的专业知识和无私奉献都在为患者带来希望和健康。感谢您为医疗事业做出的贡献。</p>
          <div class="quote">
            <p>"医学不仅是科学，更是人学；医生不仅是职业，更是使命。"</p>
            <span>—— 医学格言</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const currentDate = ref('')
const user = JSON.parse(sessionStorage.getItem("user"))
onMounted(() => {
  const now = new Date()
  const year = now.getFullYear()
  const month = now.getMonth() + 1
  const day = now.getDate()
  const week = ['日', '一', '二', '三', '四', '五', '六'][now.getDay()]

  currentDate.value = `${year}年${month}月${day}日 星期${week}`
})
</script>

<style scoped>
.doctor-welcome-container {
  background-color: #f5f7fa;
  padding: 24px;
}

.welcome-content {
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-header {
  margin-bottom: 40px;
}

.welcome-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 600;
}

.doctor-name {
  color: #409eff;
}

.welcome-subtitle {
  font-size: 16px;
  color: #666;
}

.welcome-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.welcome-card {
  padding: 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.welcome-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.welcome-card.primary {
  background: linear-gradient(135deg, #f0f7ff, #e1f0ff);
  color: #1a73e8;
}

.welcome-card.success {
  background: linear-gradient(135deg, #f0fff4, #e1ffe7);
  color: #34a853;
}

.welcome-card.warning {
  background: linear-gradient(135deg, #fff8f0, #ffefe1);
  color: #f9ab00;
}

.card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.card-icon svg {
  width: 32px;
  height: 32px;
}

.card-content h3 {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 600;
}

.card-content p {
  font-size: 14px;
  opacity: 0.9;
}

.welcome-main {
  display: flex;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.welcome-illustration {
  flex: 1;
  min-height: 400px;
  background: #f0f7ff;
}

.welcome-illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.welcome-message {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.welcome-message h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  font-weight: 600;
}

.welcome-message p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 24px;
}

.quote {
  background: #f8fafc;
  padding: 16px;
  border-left: 4px solid #409eff;
  border-radius: 0 8px 8px 0;
}

.quote p {
  font-style: italic;
  margin-bottom: 8px;
  color: #444;
}

.quote span {
  font-size: 14px;
  color: #888;
}

@media (max-width: 992px) {
  .welcome-cards {
    grid-template-columns: 1fr;
  }

  .welcome-main {
    flex-direction: column;
  }

  .welcome-illustration {
    min-height: 200px;
  }
}
</style>